<template>
	<view class="dk-address">
		<uv-popup ref="popup" mode="center" round="16" :closeable="false" :closeOnClickOverlay="false">
			<view class="address-display">
				<!-- 显示当前地址信息 -->
				<view class="address-info">
					<text class="address-label">当前地址</text>
					<text class="address-name">{{ currentAddress.name || '请选择地址' }}</text>
				</view>
				<view class="address-actions">
					<button class="action-btn cancel-btn" @click="closePopup" v-if="cancelBtnShow">
						取消
					</button>
					<button v-if="currentAddress.isLastLevel" class="action-btn confirm-btn" @click="confirmAddress">
						确认地址
					</button>
					<button v-else class="action-btn modify-btn" @click="openAddressSelector">
						完善地址
					</button>
				</view>
			</view>
		</uv-popup>


		<!-- 地址选择弹窗 -->
		<uv-popup ref="addressPopup" mode="bottom" round="16" :closeable="true" :closeOnClickOverlay="true">
			<view class="address-selector">
				<!-- 头部标题 -->
				<view class="selector-header">
					<text class="header-title">选择地址</text>
				</view>
				<!-- 面包屑导航 -->
				<view class="breadcrumb" v-if="breadcrumb.length > 0">
					<text v-for="(item, index) in breadcrumb" :key="index" @click="backToLevel(index)"
						:class="{ 'breadcrumb-item': true, 'active': index === breadcrumb.length - 1 }">
						{{ item.name }}
						<text v-if="index < breadcrumb.length - 1" class="breadcrumb-separator"> > </text>
					</text>
				</view>

				<!-- 地址列表 -->
				<scroll-view scroll-y class="address-list">
					<view v-if="loading" class="loading-state">
						<uv-loading-icon mode="circle" size="32"></uv-loading-icon>
						<text style="margin-left: 16rpx;">加载中...</text>
					</view>
					<view v-else-if="currentLevelData.length === 0" class="empty-state">
						<uv-icon name="map" size="48" color="#c0c4cc"></uv-icon>
						<text style="display: block; margin-top: 16rpx;">暂无地址数据</text>
					</view>
					<view v-else v-for="item in currentLevelData" :key="item.id" class="address-item"
						@click="selectAddress(item, $event)">
						<text class="item-name">{{ item.name }}</text>
						<text v-if="!item.isLastLevel" class="item-arrow">></text>
					</view>
				</scroll-view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
export default {
	name: "dkaddress",
	props: {
		cancelBtnShow: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			// 当前地址信息
			currentAddress: {},
			// 面包屑导航
			breadcrumb: [],
			// 当前层级数据
			currentLevelData: [],
			// 加载状态
			loading: false,
		};
	},

	methods: {
		// 打开地址选择器
		openAddressSelector() {
			this.breadcrumb = [];
			this.getAddressData(this.currentAddress.id || 0);
			this.$refs.addressPopup.open();
		},

		// 关闭地址选择器
		closeAddressSelector() {
			this.$refs.addressPopup.close();
		},

		// 选择地址
		selectAddress(item, event) {
			// 添加到面包屑
			this.breadcrumb.push(item);
			if (item.isLastLevel) {
				// 如果是最后一级，构建完整地址路径并关闭弹窗
				const fullPath = this.breadcrumb.map(item => item.name).join(' > ');
				const originalAddress = this.currentAddress.name || '';
				const finalPath = originalAddress ? `${originalAddress} > ${fullPath}` : fullPath;
				this.currentAddress = {
					...item,
					name: finalPath,
					path: finalPath,
					breadcrumb: [...this.breadcrumb],
					originalAddress: originalAddress
				};
				this.closeAddressSelector();
			} else {
				// 如果不是最后一级，加载下一级数据
				this.getAddressData(item.id);
			}
		},

		// 返回指定层级
		backToLevel(index) {
			if (index < this.breadcrumb.length - 1) {
				// 移除后面的层级
				this.breadcrumb = this.breadcrumb.slice(0, index + 1);
				// 获取对应层级的数据
				const targetItem = this.breadcrumb[index];
				this.getAddressData(targetItem.id);
			}
		},

		// 获取地址数据
		getAddressData(lastid) {
			this.loading = true;
			//根据地址查询下级地址
			this.$api.sendRequest({
				url: '/api/address/child',
				data: {
					id: lastid
				},
				success: res => {
					this.currentLevelData = res.data || [];
					this.loading = false;
				},
				fail: () => {
					this.currentLevelData = [];
					this.loading = false;
				}
			});
		},

		// 确认地址
		confirmAddress() {
			//设置为默认地址
			this.$api.sendRequest({
				url: '/api/address/setDefault',
				data: {
					id: this.currentAddress.id
				},
				success: res => {
					this.$emit('confirm', this.currentAddress);
					this.$refs.popup.close();
				}
			});
			
		},

		// 关闭弹窗
		closePopup() {
			this.$refs.popup.close();
		},

		// 对外暴露的方法
		open(qrcodeid = '') {
			console.log('qrcodeid', qrcodeid);
			if (qrcodeid) {
				// 如果传入了二维码id，查询地址信息
				this.$api.sendRequest({
					url: '/api/address/qrcode',
					data: {
						id: qrcodeid
					},
					success: res => {
						this.currentAddress = {
							id: res.lastId,
							name: res.data,
							isLastLevel: res.isLastLevel,
						}
						this.$refs.popup.open();
					},
				});
			} else {
				this.currentAddress = {
					id: '',
					name: '',
					isLastLevel: false
				};
				this.$refs.popup.open();
			}
		},

	}
}

</script>

<style lang="scss" scoped>
// 使用项目统一的配色方案
@import "@/uni_modules/uni-scss/styles/setting/_variables.scss";
@import "@/uni_modules/uv-ui-tools/theme.scss";


// 地址显示弹窗
.address-display {
	background: #ffffff;
	border-radius: 16rpx;

	width: 600rpx;
}

.address-info {
	text-align: center;
	margin-bottom: 32rpx;
}

.address-label {
	display: block;
	font-size: 24rpx;
	color: $uv-tips-color;
	margin-bottom: 12rpx;
	font-weight: 400;
}

.address-name {
	font-size: 32rpx;
	font-weight: 500;
	color: $uv-main-color;
	line-height: 1.4;
	min-height: 44rpx;
	display: block;
}

.address-actions {
	display: flex;
	justify-content: center;
	gap: 24rpx;
	margin-top: 32rpx;
}

.action-btn {
	padding: 20rpx 40rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	font-weight: 500;
	border: none;
	outline: none;
	cursor: pointer;
	min-width: 120rpx;
	text-align: center;
	line-height: 1;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.confirm-btn {
	background: linear-gradient(135deg, $uv-primary 0%, $uv-primary-dark 100%);
	color: #ffffff;

	&:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	}
}

.modify-btn {
	background: linear-gradient(135deg, $uv-primary-light 0%, #ffffff 100%);
	color: $uv-primary;
	border: 2rpx solid $uv-primary;

	&:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
}

.cancel-btn {
	background: #f8f9fa;
	color: $uv-content-color;
	border: 2rpx solid $uv-border-color;

	&:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
}

/* 地址选择弹窗 - 现代底部弹窗 */
.address-selector {
	background: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	max-height: 80vh;
	box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.15);
	overflow: hidden;
	border-top: 1rpx solid $uv-border-color;
}

.selector-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32rpx 32rpx 24rpx;
	background: #ffffff;
	border-bottom: 1rpx solid $uv-border-color;
	position: relative;
}

.header-title {
	font-size: 36rpx;
	font-weight: 600;
	color: $uv-main-color;
	letter-spacing: 0.5rpx;
}

/* 面包屑导航 - 现代标签式设计 */
.breadcrumb {
	display: flex;
	align-items: center;
	padding: 24rpx 32rpx;
	background: $uv-bg-color;
	flex-wrap: wrap;
	gap: 8rpx;
	border-bottom: 1rpx solid $uv-border-color;
}

.breadcrumb-item {
	font-size: 28rpx;
	color: $uv-content-color;
	cursor: pointer;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease;

	&:hover {
		background: rgba($uv-primary, 0.1);
	}

	&.active {
		background: $uv-primary-light;
		color: $uv-primary;
		font-weight: 600;
		box-shadow: 0 2rpx 8rpx rgba($uv-primary, 0.2);
	}
}

.breadcrumb-separator {
	margin: 0 8rpx;
	color: $uv-tips-color;
	font-size: 24rpx;
	font-weight: 500;
}

/* 地址列表 - 现代列表设计 */
.address-list {
	max-height: 60vh;
	background: #ffffff;
}

.address-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28rpx 32rpx;
	border-bottom: 1rpx solid $uv-border-color;
	background: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;

	&:last-child {
		border-bottom: none;
	}

	&:hover {
		background: rgba($uv-primary, 0.03);
	}

	&:active {
		background: rgba($uv-primary, 0.08);
		transform: scale(0.99);
	}
}

.item-name {
	font-size: 30rpx;
	color: $uv-main-color;
	flex: 1;
	font-weight: 500;
	transition: color 0.3s ease;
}

.item-arrow {
	font-size: 28rpx;
	color: $uv-tips-color;
	margin-left: 16rpx;
	font-weight: 500;
	transition: transform 0.3s ease;
}

.address-item:hover .item-arrow {
	transform: translateX(4rpx);
}

/* 选择指示器 */
.address-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6rpx;
	height: 0;
	background: $uv-primary;
	border-radius: 0 4rpx 4rpx 0;
	transition: height 0.3s ease;
}

.address-item:hover::before {
	height: 60%;
}

/* 空状态提示 */
.empty-state {
	text-align: center;
	padding: 80rpx 32rpx;
	color: $uv-tips-color;
	font-size: 28rpx;
}

/* 加载状态 */
.loading-state {
	text-align: center;
	padding: 60rpx 32rpx;
	color: $uv-tips-color;
	font-size: 28rpx;
}

/* 响应式优化 */
@media (max-width: 768px) {
	.address-display {
		width: 90vw;
		max-width: 540rpx;
		padding: 32rpx 24rpx;
	}

	.address-name {
		font-size: 30rpx;
	}

	.action-btn {
		padding: 18rpx 32rpx;
		font-size: 26rpx;
		min-width: 100rpx;
	}

	.selector-header {
		padding: 28rpx 24rpx 20rpx;
	}

	.header-title {
		font-size: 34rpx;
	}

	.breadcrumb {
		padding: 20rpx 24rpx;
	}

	.breadcrumb-item {
		font-size: 26rpx;
		padding: 6rpx 12rpx;
	}

	.address-item {
		padding: 24rpx 24rpx;
	}

	.item-name {
		font-size: 28rpx;
	}

	.item-arrow {
		font-size: 26rpx;
		margin-left: 12rpx;
	}
}
</style>